<template>
  <div class="login">
    <div class="login-logo">
      <img src="../../assets/reset_password.png" alt="">
    </div>
    <div class="login-content">
      <div class="form">
        <div class="title">用户资料完善</div>
        <el-upload
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img class="userimg" v-if="imageUrl" :src="imageUrl" />
          <img class="userimg" v-else src="../../assets/userimg.png">
        </el-upload>
        <div class="form-title">姓名</div>
        <el-input class="input" v-model="name" />
        <div class="form-title">邮箱</div>
        <el-input class="input" v-model="mailbox" @blur="handelMailbox"/>
        <div class="checking" v-if="isMail">请输入正确的邮箱格式</div>
        <div class="form-title">生日</div>
        <el-input class="input" v-model="birthday" />
        <div class="form-title">手机</div>
        <el-input class="input" v-model="phone" @blur="handelPhone"/>
        <div class="checking" v-if="isPhoneNum">请输入正确的手机格式</div>
        <div class="form-title">性别</div>
        <el-select v-model="gender" class="gender" :placeholder="gender" size="large">
          <el-option label="男" value="男"/>
          <el-option label="女" value="女"/>
        </el-select>
        <button class="button" @click="submiClick" >提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

import { isMailbox , isPhone , debounce } from '../../utils/formValidation'

export default {
  setup() {
    const store = useStore()

    const name = ref('')
    const mailbox = ref('')
    const birthday = ref('')
    const phone = ref('')
    const gender = ref('男')

    // 头像上传
    const imageUrl = ref('')
    const handleAvatarSuccess = () => {}
    const beforeAvatarUpload = (rawFile) => {
      if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
      }
      return true
    }

    // 邮箱验证
    const isMail = ref(false)
    const handelMailbox = (event) => {
      isMail.value = !isMailbox(event.target.value)
    }

    // 手机验证
    const isPhoneNum = ref(false)
    const handelPhone = (event) => {
      isPhoneNum.value = !isPhone(event.target.value)
    }

    const info = ref({
      name: name.value,
      mailbox: mailbox.value,
      birthday: birthday.value,
      phone: phone.value,
      gender: gender.value
    })
    // 提交
    const submitFun = () => {
      if (!isMail) return
      if (!isPhoneNum) return
      store.dispatch('login/infoAction', info.value)
    }
    const submiClick = debounce(submitFun,500)
    
    return {
      name,
      mailbox,
      birthday,
      phone,
      gender,
      handelMailbox,
      isMail,
      handelPhone,
      isPhoneNum,
      submiClick,
      imageUrl,
      handleAvatarSuccess,
      beforeAvatarUpload
    }
  }
}
</script>

<style lang="less">

.login{
  display: flex;
  justify-content: space-between;
  width: 14.40rem;
  height: 10.24rem;
  .login-logo{
    position: relative;
    width: 50%;
    height: 100%;
    background: rgba(154, 154, 235, 0.5);
      img{
        position: absolute;
        left: 1.39rem;
        top: 3.01rem;
        width: 4.39rem;
        height: 4.80rem;
      }
  }
  .login-content{
    width: 50%;
    height: 100%;
    .form{
      position: absolute;
      top: 0.5rem;
      left: 8.47rem;
      width: 4.46rem;
      .title{
        margin-bottom: 0.1rem;
        text-align: center;
        font-weight: 400;
        font-size: 0.32rem;
      }
      .checking{
        margin-top: 0.005rem;
        color: red;
        font-size: 0.12rem;
      }
      .userimg{
        margin: 0 1.47rem 0.14rem 1.47rem;
        width: 1.52rem;
        height: 1.6rem;
      }
      .form-title{
        font-weight: 400;
        font-size: 0.24rem;
      }
      .input{
        margin: 0.1rem 0;
        width: 4.46rem;
        height: 0.5rem;
        font-size: 0.22rem;
        border-color: #4D4DDB;
      }
      .gender{
        margin: 0.1rem 0;
        width: 4.46rem;
        height: 0.55rem;
        font-size: 0.22rem;
      }
      .button{
        margin: 0 auto;
        display: block;
        margin-top: 0.24rem;
        margin-bottom: 0.4rem;
        width: 1.77rem;
        height: 0.55rem;
        background-color: #1E1E1E;
        color: #FFFFFF;
        border-radius: 8px;
      }
    }
  }
}
</style>